<!--
 * @Date: 2023-06-30 09:27:33
 * @LastEditTime: 2023-12-21 11:05:07
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      title="优惠券"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      :up="upOption"
      @down="downCallback"
      @up="getList"
    >
      <view class="tab-list">
        <view
          @click="tabChange(i)"
          v-for="(item, i) in tabList"
          :key="i"
          class="tab-list-item c_bg"
          :class="{
            active: tabCur == i
          }"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc148.png')})`
          }"
        >
          {{ item.title }}
        </view>

        <view
          v-if="pageType == 1"
          class="use-log"
          @click="$c.to({ url: '/package/mine/coupon-use-log' })"
        >
          使用记录
        </view>
      </view>

      <view
        class="list-item common_bg"
        v-for="(item, i) in listData"
        :key="i"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc149.png')})`
        }"
        :class="{
          dis: tabList[tabCur].type1 == 2
        }"
      >
        <view class="money">
          ¥
          <text>{{ item.price }}</text>
        </view>

        <view class="info">
          <view class="title">满{{ item.man_price }}减{{ item.price }}</view>

          <view class="time">{{ item.end_time }}到期</view>
        </view>

        <view
          v-if="tabList[tabCur].type1 == 1"
          @click="toUse(item)"
          class="btn c_bg"
        >
          <image :src="$img('/static/img2/cc150.png')" lazy-load></image>
          <!-- 去使用 -->
        </view>

        <view v-if="tabList[tabCur].type1 == 2" class="btn">
          {{ item.mark }}
        </view>
      </view>

      <!-- <view
        v-for="(item, i) in listData"
        :key="i"
        class="coupon common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/coupon_item_bg.png')})`
        }"
        :class="{
          dis: tabList[tabCur].type1 == 2
        }"
      >
        <view class="tag">新人专享</view>

        <view class="coupon-l">
          <view class="l-inner">
            ¥
            <text>{{ Number(item.price) || 0 }}</text>
          </view>
        </view>

        <view class="coupon-info">
          <view class="rule">满{{ item.man_price }}减{{ item.price }}</view>

          <view class="time">{{ item.end_time }}到期</view>
        </view>

        <view
          @click="toUse(item)"
          v-if="tabList[tabCur].type1 == 1"
          class="coupon-r"
        >
          {{ item.mark }}
        </view>

        <view v-else class="coupon-r">{{ item.mark }}</view>
      </view> -->
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      optData: '',
      tabList: [
        {
          id: 0,
          title: '可使用',
          type1: 1
        },
        {
          id: 0,
          title: '不可用',
          type1: 2
        }
      ],
      tabCur: 0,
      downOption: {
        auto: false //是否在初始化完毕之后自动执行一次下拉刷新
      },

      // 上拉加载的配置
      upOption: {
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      listData: [],
      pageType: 1
    }
  },

  onLoad(options) {
    this.optData = options

    if (options.type) {
      this.pageType = options.type
    }

    // setTimeout(() => {
    //   this.listData = [
    //     {
    //       price: '23',
    //       man_price: '23',
    //       end_time: '2333-23-23 23:23:23',
    //       type1: 1,
    //       mark: '使用'
    //     },
    //     {
    //       price: '23',
    //       man_price: '23',
    //       end_time: '2333-23-23 23:23:23',
    //       type1: 2,
    //       mark: '使用'
    //     }
    //   ]
    // }, 1000)
  },

  methods: {
    toUse(item) {
      if (this.pageType == 1) {
        uni.switchTab({ url: '/pages/shouye/index' })
      }

      if (this.pageType == 2) {
        uni.$emit('chooseCoupon', item)
        uni.navigateBack({ delta: 1 })
      }
    },

    tabChange(i) {
      this.tabCur = i

      this.listData = []
      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 0)
    },

    getList({ num, size }) {
      let data = {
        page: num,
        type: this.pageType,
        type1: this.tabList[this.tabCur].type1,
        status: this.tabList[this.tabCur].id
      }

      if (this.pageType == 2) {
        data.total_price = this.optData.total_price
        data.state = this.optData.state
      }

      this.req({
        url: 'used',
        data,
        Loading: true,
        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.data)

            console.log(this.listData)
            this.mescroll.endByPage(res.data.data.length, res.data.last_page)
          }
        }
      })
    },

    back() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 0 30rpx;

  .tab-list {
    display: flex;
    padding: 30rpx;
    position: relative;

    .tab-list-item {
      margin-right: 40rpx;
      width: 210rpx;
      height: 76rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      filter: grayscale(1);

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      text-shadow: 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000,
        0 0 3px #000000;

      &.active {
        filter: grayscale(0);
      }
    }

    .use-log {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
      text-shadow: 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000,
        0 0 3px #000000;
    }
  }

  .list-item {
    width: 690rpx;
    box-sizing: border-box;
    padding: 40rpx 30rpx 40rpx 10rpx;
    display: flex;
    align-items: center;
    margin: 0 auto 20rpx;

    .money {
      width: 160rpx;
      text-align: center;
      // background: #f00;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;

      text {
        font-size: 34rpx;
      }
    }

    .info {
      flex: 1;
      padding-left: 20rpx;

      .title {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      .time {
        margin-top: 20rpx;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #cccccc;
      }
    }

    .btn {
      width: 132rpx;
      height: 52rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;

      image {
        width: 100%;
        height: 100%;
      }
    }

    &.dis {
      filter: grayscale(1);

      .btn {
        color: #ccc;
        background: none;
        border: 1px solid #ccc;
      }
    }
  }

  // .coupon {
  //   width: 690rpx;
  //   margin: 30rpx auto 0;
  //   display: flex;
  //   align-items: center;
  //   position: relative;
  //   padding: 20rpx 0;

  //   &.dis {
  //     filter: grayscale(1);
  //   }

  //   .tag {
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //     border-radius: 20rpx 0 20rpx 0;
  //     overflow: hidden;
  //     background: linear-gradient(0deg, #85b9ff 0%, #b01bff 100%);
  //     height: 36rpx;
  //     padding: 0 10rpx;
  //     display: flex;
  //     align-items: center;

  //     font-size: 22rpx;
  //     font-family: Source Han Sans CN;
  //     font-weight: 400;
  //     color: #ffffff;
  //   }

  //   .coupon-l {
  //     width: 198rpx;
  //     height: 146rpx;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     border-right: 1rpx dashed #eeeeee;

  //     font-size: 24rpx;
  //     font-family: Source Han Sans CN;
  //     font-weight: 500;
  //     color: #ffffff;

  //     text {
  //       font-size: 40rpx;
  //     }
  //   }

  //   .coupon-info {
  //     width: 360rpx;
  //     box-sizing: border-box;
  //     padding-left: 20rpx;

  //     .rule {
  //       font-size: 28rpx;
  //       font-family: Source Han Sans CN;
  //       font-weight: 500;
  //       color: #ffffff;
  //     }

  //     .time {
  //       margin-top: 20rpx;

  //       font-size: 24rpx;
  //       font-family: Source Han Sans CN;
  //       font-weight: 400;
  //       color: #ffffff;
  //     }
  //   }

  //   .coupon-r {
  //     flex: 1;
  //     text-align: center;

  //     font-size: 28rpx;
  //     font-family: Source Han Sans CN;
  //     font-weight: 500;
  //     color: #ffffff;
  //   }
  // }
}
</style>
